import React, { Component } from 'react';
import '../views/style/home.css'
import classNames from 'classnames'

class App extends Component {

  constructor(props) {
   super(props);
   this.state = {
     active:0
   };
 }



  onMouseOut(e){
    this.setState({
      active:0
    })
  }

  onMouseOver(e){
      //e.stopPropagation()
      const index = e.target.getAttribute("index");
      if(index!=null){
        this.setState({
          active:index
        })
      }
  }


  render() {
    let  zindex = this.state.active;
    let leftClass = classNames(
      'left',{
        "active":zindex==="1"
      }
    );
    let  leftDiv = classNames(
      "main-pic","pic-left",
      {"leftactive":zindex==="1"},
      {"on":zindex==="1"}
    )
    let midclass =classNames(
      'middle',{
        "active":zindex==="2"
      }
    );
    let  middiv = classNames(
      "main-pic","pic-middle",
      {"middleactive":zindex==="2"},
      {"on":zindex==="2"}
    )
    let rightclass =classNames(
      'middle',{
        "active":zindex==="3"
      }
    );
    let  rightdiv = classNames(
      "main-pic","pic-right",
      {"rightactive":zindex==="3"},
      {"on":zindex==="3"}
    )
    return (
      <div>
        <div className="homehead"></div>
        <div className="mid3">
          <div className="aboutus mr30" >
            <div><span className="title2">公司简介</span><br></br>
              <span className="bigTitle">____ ABOUT US ____ </span>
            </div>
          </div>
          <div>
            <div className="wzdiv">
              <p className="wzdivp">杭州物源科技有限公司</p>
              <p className="wzdivp2">是浙江省科技企业，浙江省物联网协会理事单位。</p>
              <p>主要提供面向健身健康、医疗设备监控、工业设备的专业物联网平台建设和大数据分析服务，专注于大健康（医疗、健身康复）、工业4.0行业。</p>
              <p> 公司在设备资产远程监控领域、健身康复管理领域有成熟的解决方案。包含：</p>
              <p>1）设备数据采集的终端硬件；</p>
              <p>2）设备的业务逻辑控制服务(Web/App/Wechat)；</p>
              <p>3）基于BI的数据报表分析；</p>
              <p>4）正在开拓Hadoop的大数据预测分析、AI服务。</p>
              <p>为企业做基于数字化的业务模式转型，提升客户竞争力和生存空间。</p>
            </div>
          </div>
        </div>
        <div className="mid1" style={{height:1080}}>
          <div className="line"></div>
          <div className="mid1-title" style={{height:600}}>
            <div ><span className="title">主营业务</span><br></br>
              <span className="bigTitle">____ MAIN BUSINESS ____</span>
            </div>
            <div className="bussTitle" >
              <p className="ft18"><strong>1）各类设备接入智能硬件：</strong>模组、数据采集Box、工控盒</p>
              <p className="ft18"><strong>2）智能健身康复数据管理解决方案：</strong>设备接入、设备控制、业务管理系统、健康体测分析报告；</p>
              <p className="ft18"><strong>3）资产远程监控与预测解决方案：</strong>资产跟踪保护、防伪串货、精准维修、远程监控、分析预测；</p>

            </div>
            <div className="znyj">
              <div style={{marginTop:50}}>
                <img className="img1" src={ require('../views/images/znyj.png')} alt=""/>
                <h2 >智能硬件</h2>
              </div>
              <div className="znyjdiv2" >
                <img className="img2" src={ require('../views/images/cloud.jpg')} alt=""/>
                <h2>智能云</h2>
              </div>
              <div  >
                <img className="img3" src={ require('../views/images/fx.png')} alt=""/>
                <h2>数据分析与挖掘</h2>
              </div>
            </div>
          </div>
          <div  className="mid1-des">
            <a className={leftClass}  href="tec" onMouseOver={(e)=>this.onMouseOver(e)} onMouseOut={(e)=>this.onMouseOut(e)}>
              <div className={leftDiv} index="1" >
                <div className="font-position">资产跟踪/监视</div>
              </div>
              <div className="main-info">大健康（医疗/健身/康复/养老）的服<br></br>务云平台</div>
            </a>
            <a  className={midclass} href="tec" onMouseOver={(e)=>this.onMouseOver(e)} onMouseOut={(e)=>this.onMouseOut(e)}>
              <div className={middiv}  index="2" >
                <div className="font-position">维护/控制</div>
              </div>
              <div className="main-info">数据采集与运行控制的<br></br>智能硬件</div>
            </a>
            <a  className={rightclass} href="tec" onMouseOver={(e)=>this.onMouseOver(e)} onMouseOut={(e)=>this.onMouseOut(e)}>
              <div className={rightdiv} index="3" >
                <div className="font-position">数据分析挖掘</div>
              </div>
              <div className="main-info">运行状况的BI展示、大数据分析和<br></br>预测挖掘</div>
            </a>
          </div>
        </div>
        <div className="mid2">
          <div className="aboutus">
            <div><span className="title2">合作伙伴</span><br></br>
              <span className="bigTitle">____ PARTNER ____ </span>
            </div>
          </div>
          <div className="us-des">
            <div className="des1">
              <div className="des1-font">
                <img src={require('../views/images/ms.png')} alt="" />
              </div>
              <div className="des1-font" >
                <img src={require('../views/images/oracle.png')} alt="" />
              </div>
              <div className="des1-font">
                <img src={require('../views/images/baidu.jpg')} alt="" />
              </div>
              <div className="des1-font">
                <img src={require('../views/images/wd.jpg')} alt="" />
              </div>
              <div className="des1-font">
                <img src={require('../views/images/zu.png')} alt="" />
              </div>

            </div>

          </div>
        </div>

        <div className="foot">
          版权所有 杭州物源科技有限公司 浙ICP备15026850号
        </div>
      </div>

    );
  }
}

export default App;
